<template xmlns:el-col="http://www.w3.org/1999/html">
<h1>El-栅格(分列)组件</h1>
<!--  响应式：能够按照预设比例，随着设备尺寸的变化而变化-->
  <el-row>
    <el-col :span="8" style="background-color: red">111</el-col>
    <el-col :span="8" style="background-color: green">222</el-col>
    <el-col :span="8" style="background-color: red">333</el-col>
  </el-row>
<!-- :gutter属性：el-col的左右间距 可以分别设置为10 20 30 40 -->
  <el-row :gutter="10">
    <el-col :span="12"><img src="/imgs/rich.jpg" style="width: 100%"></el-col>
    <el-col :span="12"><img src="/imgs/rich.jpg" style="width: 100%"></el-col>
  </el-row>

  <el-row :gutter="5">
    <el-col :span="4"><img src="/imgs/rich.jpg" style="width: 100%"></el-col>
    <el-col :span="4"><img src="/imgs/rich.jpg" style="width: 100%"></el-col>
    <el-col :span="4"><img src="/imgs/rich.jpg" style="width: 100%"></el-col>
    <el-col :span="4"><img src="/imgs/rich.jpg" style="width: 100%"></el-col>
    <el-col :span="4"><img src="/imgs/rich.jpg" style="width: 100%"></el-col>
    <el-col :span="4"><img src="/imgs/rich.jpg" style="width: 100%"></el-col>
  </el-row>
  <h3>三张图1:2:3</h3>
  <el-row :gutter="5">
    <el-col :span="4"><img src="/imgs/rich.jpg" style="width: 100%"></el-col>
    <el-col :span="8"><img src="/imgs/rich.jpg" style="width: 100%"></el-col>
    <el-col :span="12"><img src="/imgs/rich.jpg" style="width: 100%"></el-col>
  </el-row>
  <h3>8列均分</h3>
  <el-row>
    <el-col :span="3" v-for="i in 8">{{ i }}</el-col>
  </el-row>
<!--:offset="0" 默认靠左不偏移，写几就向右移动几列-->
  <h3>列偏移</h3>
  <el-row>
    <el-col :span="20" :offset="4">
      <img src="/imgs/rich.jpg" style="width: 100%">
    </el-col>
  </el-row>
  <h3>布局嵌套</h3>
  <el-row>
    <el-col :span="12" style="border: 3px solid salmon;">111</el-col>
    <el-col :span="12" style="border: 3px solid royalblue;">
<!--      布局嵌套时，一定要把当前元素再看作是一个新的el-row，还是24份，再进行分配！-->
      <el-row>
        <el-col :span="8" style="border: 3px solid red;">222</el-col>
        <el-col :span="8" style="border: 3px solid green;">333</el-col>
        <el-col :span="8" style="border: 3px solid blue;">444</el-col>
      </el-row>
    </el-col>
  </el-row>
  <hr>
  <h2>我的主页</h2>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-menu>
          <el-menu-item index="1">选项1</el-menu-item>
          <el-menu-item index="2">选项2</el-menu-item>
          <el-menu-item index="3">选项3</el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="16">
        <el-row :gutter="20">
          <el-col :span="8">
            <img src="/imgs/rich.jpg" style="width: 100%;">
          </el-col>
          <el-col :span="8">
            <img src="/imgs/rich.jpg" style="width: 100%;">
          </el-col>
          <el-col :span="8">
            <img src="/imgs/rich.jpg" style="width: 100%;">
          </el-col>
        </el-row>
      </el-col>
    </el-row>
</template>

<script setup>

</script>

<style scoped>

</style>